<template>
  <div style="padding:30px;">
    <Breadcrumb />
    <el-card class="box-card" style="margin:15px 0;">
      <el-table
        :data="authorityList"
        border
        style="width: 100%"
      >
        <el-table-column
          type="index"
          label="#"
          width="50"
        />
        <el-table-column
          prop="authName"
          label="权限名称"
        />
        <el-table-column
          prop="path"
          label="路径"
        />
        <el-table-column
          label="权限等级"
        >
          <template slot-scope="{ row }">
            <el-tag :type="tagType(row)">
              {{ levelArr[row.level] }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { getAllAuthority } from '@/api/departments.js'

export default {
  data() {
    return {
      authorityList: [],
      levelArr: {
        0: '等级一',
        1: '等级二',
        2: '等级三'
      }
    }
  },
  computed: {
    tagType() {
      return function(row) {
        if (row.level === '0') {
          return ''
        }
        if (row.level === '1') {
          return 'success'
        }
        return 'warning'
      }
    }
  },

  created() {
    this.loadAllAuthority()
  },
  methods: {
    async loadAllAuthority() {
      const res = await getAllAuthority('list')
      this.authorityList = res
    }
  }
}
</script>

<style scoped lang='less'>

</style>

